<ng-container *ngIf="!error">
    <div nz-form class="ant-advanced-search-form">
        <nz-form-item>
            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                <input type="text" nz-input [placeholder]="getSearchInputPlaceHolderText()" [(ngModel)]="searchText"
                    (keydown)="onSearchInputKeydown($event)" />
            </nz-input-group>
            <ng-template #suffixIconButton>
                <nz-button-group>
                    <button nz-button nzType="default" title="点击设置搜索列" (click)="showFieldsDialog()">
                        <span title="设置搜索列">...</span>
                    </button>
                    <button nz-button nzType="primary" nzSearch title="搜索" (click)="search()" [disabled]="isSearching">
                        搜索
                    </button>
                </nz-button-group>
                <button nz-button nzType="primary" nzSearch title="导出" (click)="export()" [disabled]="isSearching"
                    style="margin-left: 2px;">
                    导出
                </button>
            </ng-template>
        </nz-form-item>
    </div>
    <nz-table #productSummary [nzData]="dataItems" [nzScroll]="{x:'8000px',y:tableHeight+'px' }" [nzSize]="'small'"
        nzFrontPagination [nzPageSize]="15" [nzLoading]="dataItems == null" nzShowSizeChanger>
        <thead>
            <tr>
                <th *ngFor="let col of columns" [nzWidth]="col.width||null">{{col.title}}</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let dataItem of productSummary.data">
                <tr>
                    <ng-container *ngFor="let col of columns">
                        <td [nzShowExpand]="col.field==getTreeField()" [nzExpand]="dataItem.expands"
                            (nzExpandChange)="loadHistor(dataItem,$event)">{{
                            dataItem[col.field] }}</td>
                    </ng-container>
                </tr>
                <ng-container *ngIf="dataItem.expands">
                    <tr *ngIf="!dataItem.children">
                        <td [nzIndentSize]="4" [attr.colspan]="columns.length">
                            数据正在加载中...
                        </td>
                    </tr>
                    <tr *ngIf="dataItem.children!=null && dataItem.children.length == 0">
                        <td [nzIndentSize]="4" [attr.colspan]="columns.length">
                            暂无历史数据
                        </td>
                    </tr>
                    <tr *ngFor="let dataItem of dataItem.children||[]">
                        <ng-container *ngFor="let col of columns">
                            <td [nzIndentSize]="col.field == 'item_id' ? 4 : 0">{{ case(dataItem)[col.field] }}</td>
                        </ng-container>
                    </tr>
                </ng-container>
            </ng-container>
        </tbody>
    </nz-table>
    <app-field-selector #dialog [columns]="columns"></app-field-selector>
</ng-container>
<ng-container *ngIf="error">
    <nz-empty [nzNotFoundContent]="error" />
</ng-container>